<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>员工列表页面</title>

    <link rel="stylesheet" href="./css/bootstrap.min.css">

</head>



<body>

    <div id="app">

        <div class="container">

            <!-- 顶部搜索框模块 -->

            <div class="form-group">

                <div class="input-group">

                    <h4>员工列表</h4>

                    <button type="button" class="btn btn-danger btn-xs" @click="showAddEmpDiv()">新增</button>

                </div>

            </div>

            <!-- 数据表格 -->

            <table class="table table-bordered table-hover mt-2">

                <thead>

                    <tr>

                        <th>编号</th>

                        <th>用户名</th>

                        <th>职位</th>

                        <th>联系方式</th>

                        <th>邮箱</th>

                        <th>操作</th>

                    </tr>

                </thead>

                <tbody>

                    <tr v-for="(emp,index) in emps" ::key="emp.employeeId">

                        <td>{{emp.employeeId}}</td>

                        <td>{{emp.empName}}</td>

                        <td>{{emp.position}}</td>

                        <td>{{emp.phoneNumber}}</td>

                        <td>{{emp.email}}</td>

                        <td>

                            <button type="button" class="btn btn-primary btn-xs"
                                @click="updataEmp(emp.employeeId)">修改</button>

                            <button type="button" class="btn btn-danger btn-xs">删除</button>

                        </td>

                    </tr>

                </tbody>

                <tfoot>

                    <tr>

                        <td colspan="5" style="text-align: center">暂无数据</td>

                    </tr>

                </tfoot>

            </table>

            <div class="row" v-if="showdiv">

                <form>

                    <div class="form-group" v-if="showEmpIdInput">

                        <label for="exampleInputemployeeId">用户编号</label>

                        <input type="text" class="form-control" id="exampleInputemployeeId" disabled
                            v-model="emp.employeeId" />

                    </div>

                    <div class="form-group">

                        <label for="exampleInputempName">用户名</label>

                        <input type="text" class="form-control" id="exampleInputempName" placeholder="请输入用户名"
                            v-model="emp.empName" />

                    </div>

                    <div class="form-group">

                        <label for="exampleInputposition">职位</label>

                        <input type="text" class="form-control" id="exampleInputposition" placeholder="请输入职位"
                            v-model="emp.position" />

                    </div>

                    <div class="form-group">

                        <label for="exampleInputphoneNumber">联系方式</label>

                        <input type="text" class="form-control" id="exampleInputphoneNumber" placeholder="请输入联系方式"
                            v-model="emp.phoneNumber" />

                    </div>

                    <div class="form-group">

                        <label for="exampleInputemail">邮箱</label>

                        <input type="text" class="form-control" id="exampleInputemail" placeholder="请输入邮箱"
                            v-model="emp.email" />

                    </div>

                    <button type="button" class="btn btn-info" @click="eduitEmp()">新增</button>

                </form>

            </div>

        </div>

    </div>

</body>



</html>

<script src="./js/2.7.14_dist_vue.js"></script>

<script src="./js/axios.min.js"></script>

<script>
    // 创建实例时设置配置的默认值
    var http = axios.create({
        baseURL: 'http://localhost:8182',
        timeout: 3000,
    });

    // 在实例已创建后修改默认值
    http.defaults.headers.common['Authorization'] = "123456";


    new Vue({

        el: "#app",

        data: {

            msg: "Vue",

            // 员工对象 
            emp: {},

            // 员工集合
            // emps: [],
            emps: [],

            pageNum: 1,

            showdiv: false,

            showEmpIdInput: false,

        },

        methods: {

            //点击保存按钮

            eduitEmp() {

                if (this.emp.employeeId) {

                    // 修改功能

                    http.put('/employees', this.emp)

                        .then(res => {

                            alert(res.data.message);

                            this.getEmpList();

                            this.clearForm();

                        })

                        .catch(error => {

                            console.error("Error:", error);

                        });

                } else {

                    // 新增功能

                    http.post('/employees', {


                        empName: this.emp.empName,

                        position: this.emp.position,

                        phoneNumber: this.emp.phoneNumber,

                        email: this.emp.email,




                    })

                        .then(res => {

                            if (!res.data.status) {

                                alert(res.data.message);

                            } else {

                                alert(res.data.message);

                                this.getEmpList();

                                this.clearForm();

                            }

                        })

                        .catch(error => {

                            console.error("Error:", error);

                        });

                }

            },
            //点击编辑按钮

            updataEmp(id) {

                http.get('/employees/' + id)

                    .then(res => {

                        console.log(res);

                        this.showdiv = true;

                        this.showEmpIdInput = true;

                        this.emp = res.data; // 将单个员工信息赋值给 this.emp

                    })

                    .catch(error => {

                        console.error("Error:", error);

                    });

            },



            //点击新增按钮

            showAddEmpDiv() {

                this.showdiv = true;

                this.showEmpIdInput = false;

                // this.clearForm();

            },

            // 清空表单

            clearForm() {

                this.emp = {};

                this.showdiv = false;

                this.showEmpIdInput = false;

            },

            //获取员工列表数据

            getEmpList() {

                let _this = this;

                http.get('/employees/page', {

                    params: {

                        pageNum: _this.pageNum,

                    },

                })

                    .then(function (data) {

                        console.log(data);

                        if (!data.data.status) {

                            alert(data.data.message)

                        } else {

                            // console.log("---------", data.data.data.list);

                            // console.log("!!!!!!!!!!", this);

                            // console.log("@@@@@@@@@", _this);

                            _this.emps = data.data.data.list

                        }

                    })

                    .catch(function (error) {

                        console.log(error);

                    });

            },

        },

        //vue实例初始化后调用

        created() {

            console.log("created");

            //页面加载，获取数据

            this.getEmpList();




        },

        computed: {



        }

    })

</script>